<template>
  <div>
    <!-- 图标模块 -->
    <div id="echarts" style="height: 400px"></div>
    <!-- 按钮模块 -->
    <div>
      <!-- 按钮绑定事件 -->
      <el-button @click="comeback">实时疫情</el-button>
      <el-button @click="tonew1">新增确诊分布</el-button>
      <el-button @click="tonew2">现有无症状分布</el-button>
    </div>
  </div>
</template>
<script>
// 引入辅助函数
import { mapActions, mapState } from "vuex";
export default {
  data() {
    return {
      timer: null,
    };
  },
  computed: {
    ...mapState("dataList", ["dataList"]),
  },
  created() {
      this.findData();
  },
  beforeDestroy() {
    if (this.timer) {
      clearInterval(this.timer);
      this.timer = null;
    }
  },
  methods: {
    // 命名空间+动作里面的方法名
    ...mapActions("dataList", ["page_query"]),
    tonew1(){
      this.$router.push({
          path: "/echarts/new",
        });
    },
    tonew2(){
      this.$router.push({
          path: "/echarts/new2",
        });
    },
    comeback(){
      this.$router.push({
          path: "/echarts/index",
        });
    },
    // 获取接口数据
    findData() {
      this.page_query({
        page: 1,
        pageSize: 10,
      }).then(() => {
        let res1 = this.dataList.list.map((item) => {
          return item.province;
        });
        //生成一个死亡人数的数组
        let res2 = this.dataList.list.map((item) => {
          return item.suspected;
        });
         let res3 = this.dataList.list.map((item) => {
          return item.dead;
        });
        let res4 = this.dataList.list.map((item) => {
          return item.cure;
        });
        let res5 = this.dataList.list.map((item) => {
          return item.outside;
        });
        this.initEchart(res1, res2, res3, res4, res5);
      });
    },
    // 初始化图表
   initEchart(val1, val2, val3, val4, val5) {
      echarts.init(document.getElementById("echarts")).dispose();
      //初始化图标
      var myChart = echarts.init(document.getElementById("echarts"));
      // 指定图表的配置项和数据
      var option = {
        title: {
          text: "疫情新增趋势",
          subtext: "单位:例",
        },
        tooltip: {
          trigger: "axis",
        },
         legend: {
        data: ['新增确诊人数', '新增死亡人数', '新增治愈人数','新增境外输入人数']
          },
        xAxis: {
          type: "category",
          boundaryGap: false, // 不留白，从原点开始
          inverse: true,
          data: val1,
        },
        yAxis: {
          type: "value",
        },
        series: [
          {
            name: "新增确诊人数",
            data: val2,
            showSymbol: false,
            barWidth: 15,
            itemStyle: {
              //通常情况下：
              normal: {
                //每个柱子的颜色即为colorList数组里的每一项，如果柱子数目多于colorList的长度，则柱子颜色循环使用该数组
              },
              //鼠标悬停时：
              emphasis: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: "rgba(0, 0, 0, 0.5)",
              },
            },
            emphasis: {
              shadowBlur: 10,
              shadowOffsetX: 0,
              shadowColor: "rgba(0, 0, 0, 0.5)",
            },
            type: "line",
          },
          {
            data: val3,
            name: "新增死亡人数",
            showSymbol: false,
            barWidth: 15,
            itemStyle: {
              //通常情况下：
              normal: {
                //每个柱子的颜色即为colorList数组里的每一项，如果柱子数目多于colorList的长度，则柱子颜色循环使用该数组
              },
              //鼠标悬停时：
              emphasis: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: "rgba(0, 0, 0, 0.5)",
              },
            },
            emphasis: {
              shadowBlur: 10,
              shadowOffsetX: 0,
              shadowColor: "rgba(0, 0, 0, 0.5)",
            },
            type: "line",
          },
          {
            data: val4,
            name: "新增治愈人数",
            showSymbol: false,
            barWidth: 15,
            itemStyle: {
              //通常情况下：
              normal: {
                //每个柱子的颜色即为colorList数组里的每一项，如果柱子数目多于colorList的长度，则柱子颜色循环使用该数组
              },
              //鼠标悬停时：
              emphasis: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: "rgba(0, 0, 0, 0.5)",
              },
            },
            emphasis: {
              shadowBlur: 10,
              shadowOffsetX: 0,
              shadowColor: "rgba(0, 0, 0, 0.5)",
            },
            type: "line",
          },
          {
            data: val5,
            name: "新增境外输入人数",
            showSymbol: false,
            barWidth: 15,
            itemStyle: {
              //通常情况下：
              normal: {
                //每个柱子的颜色即为colorList数组里的每一项，如果柱子数目多于colorList的长度，则柱子颜色循环使用该数组
              },
              //鼠标悬停时：
              emphasis: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: "rgba(0, 0, 0, 0.5)",
              },
            },
            emphasis: {
              shadowBlur: 10,
              shadowOffsetX: 0,
              shadowColor: "rgba(0, 0, 0, 0.5)",
            },
            type: "line",
          },
        ],
      };
      // 使用刚指定的配置项和数据显示图表。
      myChart.setOption(option);
    },
  },
};
</script>
<style scoped>
  div{
    position: relative;
  }
  div div:nth-child(2) {
    margin-top: 50px;
    left: 50%;
    margin-left: -300px;
  }
  div div .el-button {
    width: 200px;
  }
  div div .el-button:nth-child(2) {
    background-color: #00bec7;;
    color: white;
  }
</style>